<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title> 
<!-- 引入element样式 -->
<link rel="stylesheet"
	href="../public/plugins/element-ui/lib/theme-chalk/index.css">
<script src="../public/libs/vue.js"></script>
<!--引入element组件库-->
<script src="../public/plugins/element-ui/lib/index.js"></script>
<script src="../public/plugins/axios/dist/axios.js"></script> 
<script src="../public/libs/JsonExportExcel.min.js"></script> 
</head>
<body>
	<div id="headVue"  align="center">
		<div style="overflow: auto; width: 100%;">
			<el-row> 
				<el-col :span=3 align="right"> <span>输入查询年度：</span> </el-col> 
				<el-col :span=4> 
					<el-input type="input" size="mini" v-model="baseDays"></el-input> 
				</el-col> 
				
				<el-col :span=10> 
					<el-button size="mini" type="primary" @click="queryList">查询</el-button> 
					<el-button size="mini" type="primary" @click="jsonToExcel">导出到EXCEL</el-button> 
					
				</el-col> 
			</el-row>
		</div>
		<div div style="overflow: auto; width: 100%;">
		<el-table :data="yearlyLines.slice((currentPage-1)*pageSize,currentPage*pageSize)"  
			:header-cell-style="{'text-align':'center',background:'#eef1f6',color:'#0000FF'}"
			@sort-change='sort_change' size="mini" :show-header="true"
			ref="prodLines"  border style="background-color: bisque;">              
			
			<el-table-column prop="yearly" label="年度"  sortable="custom">		
				
			</el-table-column>
			<el-table-column prop="buyTotal" label="采购入库总额" sortable="custom">
				</el-table-column>
			<el-table-column prop="invTotal" label="采购发票总额" sortable="custom">
				</el-table-column>
			<el-table-column prop="saleTotal" label="销售总额（非税）" sortable="custom">
				</el-table-column>
			<el-table-column prop="rateBuy" label="入库/销售(%)" sortable="custom">
				</el-table-column>
			<el-table-column prop="rateInv" label="发票/销售(%)" sortable="custom">
				</el-table-column>
			<el-table-column label="操作"	style="width:100 ;" align="center"> 
					<template slot-scope="rowData">
						<el-button	size="mini" type="primary" @click="navigate">查看详情</el-button> 
					</template> 
				</el-table-columm>
		</el-table> 
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[10, 20, 30, 50]"
			:page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="yearlyLines.length">
		</el-pagination>   

		</div>
		<div style="width:100%; height:200px; background: url(../img/loading7.gif) no-repeat;
	  background-size: 150px 150px;position: relative;  top: 50%;  left: 45%; " v-show="dataLoading">
	</div>
	</div>
	
	
<script>
var head = new Vue({ 
	el: "#headVue",
	data:{
			yearlyLines: [],
			headCol:['年度','采购入库总额','采购发票总额','销售总额','入库/销售（%)','发票/销售（%)'],
			baseDays:'',
			dataLoading:false,
			 currentPage: 1,// 当前页            
	            pageSize: 50,// 每页多少条
			
		},
	methods: 
	{ 
		queryList:function(val){
			var that=this;
			
			this.yearlyLines=[]; 
			this.dataLoading=true;
			axios({
                method:'post',
                url:'../dataCenter/itemChain/yearly',
                data:{},
                //headers:{"Content-Type":"multipart/form-data"}
            }).then(rsp=>{               
                var resp=rsp.data;                 
                that.yearlyLines=resp.yearlyLines; 
                that.dataLoading=false;
                if(resp.code==200){}else{}
            }).catch(error=> {
                that.$message({
                    type:'error',
                    duration:60000,
                    message:'请求失败! error:'+error
                });
            })

		},
		navigate(){
			//window.location.href="/dataCenter/itemChain.html";
		},
		 // 每页多少条
        handleSizeChange(val) {
            this.pageSize = val;
        },
        // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
		//若采用相同排序方法可简写：
	    sort_change(column) {
			this.currentPage = 1; // 排序后返回第一页
		    this.proptype = column.prop; // 将键名prop赋值给变量proptype
	      if (column.order === "descending") {
	        this.yearlyLines.sort(this.my_desc_sort);
	       
	      } else if (column.order === "ascending") {
	        this.yearlyLines.sort(this.my_asc_sort);	        
	      }
	      
	    },
	    //排序方法
	    my_desc_sort(a, b) {
	    	if(typeof(a[this.proptype])=="string")
	    		 return  b[this.proptype].localeCompare(a[this.proptype]);
	    	else if(typeof(a[this.proptype])=="number")
	      	return b[this.proptype] - a[this.proptype]; // a["time"] 等价于 a.time
	    },
	    my_asc_sort(a, b) {
	    	if(typeof(a[this.proptype])=="string")
	    		 return  a[this.proptype].localeCompare(b[this.proptype]);
	    	else if(typeof(a[this.proptype])=="number")
	      	return a[this.proptype] - b[this.proptype]; // a["time"] 等价于 a.time
	    },
	    jsonToExcel(){
	    	var arr = [];
	    	var datas=[];
	    	this.headCol.forEach(function(item){
	    	 //arr.push({id: item.dd,	 text: item.re1})
	    	  arr.push(item) ;
	    	})
	    
			var option={};
			option.fileName = "呆滞物料查询"+new Date().getFullYear();
			
			datas.push({sheetData:this.yearlyLines,sheetHeader:arr});
			option.datas=datas;
			
			var toExcel=new ExportJsonExcel(option);
			toExcel.saveExcel();
		}
		
	}
});


</script>

<style >
	
	.el-table{
       width:99.9%!important;
	}
	.el-row {
    margin-bottom: 20px;
    
  }
  el-row:last-child {
      margin-bottom: 0;
    }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
 
  .myMargin{
  	margin-left:2%;
  }
</style> 
</body>

</html>
